
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>查看个人出差记录</title>

<!-- BootStrap -->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<!-- easy UI -->
<link rel="stylesheet" type="text/css"
	href="../themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../themes/color.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
	$(function(){
		//获取当前年月日
		$.ajax({
			url:'../getCurrentYearAndTime',
			type:'post',
			dataType:"json",
			success:function(date){
				$('#year').append("<option selected='selected'>"+date.currentyear+"</option>")
				$('#year').append("<option>"+date.lastyear+"</option>")
				$('#year').append("<option>"+date.lasttwoyear+"</option>")
				$("option[value="+date.currentmonth+"]").attr("selected", "selected");
			}
		});
		//下拉框获取uname
		$.ajax({				
			url: "../selectUname",
			type:'post',
			dataType:"json",
			async:false,
			success:function(r){
				for (var i = 0; i < r.unames.length; i++) {
					$("#uname").append("<option>"+r.unames[i].uname+"</option>");
				}
			}
		});
		//提交点击事件
		$("#btn").click( function() {
			var uname = $('#uname option:selected').text()
 			var year = $('#year option:selected').text()
			var month = $('#month option:selected').text()
			$('#dg').datagrid('load',{
				uname:uname,
				year:year,
				month:month
			});
		});
		//数据表格
		$('#dg').datagrid({    
		    url:'../selectOnlyBtravel',    
		    columns:[[
				{field:'att_id',title:'记录表id',width:200,hidden:true},
				{field:'uid',title:'用户id',width:200,hidden:true},
				{field:'uname',title:'员工姓名',width:200,resizable:true},    
				{field:'time',title:'时长（：天）',width:200,resizable:true},  
				{field:'date',title:'日期',width:200,resizable:true},  
				{field:'remark',title:'备注',width:298,resizable:true},  
		    ]],
		    pagination:true,
		    striped:true,
		    pageSize:10,
		    pageList:[10,15,20],
		    width:'900px',
		});
	});
</script>
<body>
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="container">
			<p class="navbar-text"><h1 style="color:black">查询个人出差记录...</h1></p>
		</div>
	</nav>
	<div id="main_demo" style="margin-top: 100px;">
		<h3>条件选择查询...&nbsp;<span class="glyphicon glyphicon-hand-right"></span></h3>
		<div style="margin-left: 209px;margin-top: -36px;">
			<select id="uname" name="sel">
				<option value="0">员工姓名</option>
			</select>
			<select id="year" name="sel">
				<option value="0">年份</option>
			</select>
			<select id="month" name="sel">
				<option value="0">月份</option>
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">04</option>
				<option value="5">05</option>
				<option value="6">06</option>
				<option value="7">07</option>
				<option value="8">08</option>
				<option value="9">09</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
			</select>
			<button id="btn" type="button" class="btn btn-info">提交</button>
		</div>
	</div>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-9" style="margin-left: 150px; margin-top: 20px;">
				<table id="dg"></table>
			</div>
		</div>
	</div>
</body>
</html>